<template>
  <div :class="['header-barn','header-barn-'+theme]">
    <div class="menu">
      <router-link class="iconfont icon-logo" to="/">首页</router-link>
    </div>
    <dev class="search-body">
     <div class="search-panel">
       <div class="search-panel-inner">
         <div class="input-panel">
           <el-input v-model="setop" class="search-input" type="text" clearable/>
           <div class="iconfont icon-search"></div>
         </div>
       </div>
     </div>
    </dev>
    <div class="user-panel">
      <div class="user-avatar">
        <template v-if="loginStore.token">
          <a :href="`/user/${loginStore.uid}`" target="_blank">
          <Avatar
              class="avatar_img"
              :avatar="loginStore.imageUrl"
              :userId="loginStore.uid"
              :width="35"
              :lazy="false"></Avatar>
          </a>
          <div class="user-info-panel">
            <div class="nick-name">{{loginStore.username}}</div>
            <div class="count-info">
              <div class="count-info-item">
                <div class="count-info-item-num">1</div>
                <div class="count-info-item-title">关注</div>
              </div>
              <div class="count-info-item">
                <div class="count-info-item-num">1</div>
                <div class="count-info-item-title">关注</div>
              </div>
              <div class="count-info-item">
                <div class="count-info-item-num">1</div>
                <div class="count-info-item-title">关注</div>
              </div>
            </div>
            <router-link :to="`/user/${loginStore.uid}`" class="item iconfont icon-user">
              <span class="item-name">个人中心</span>
              <span class="iconfont icon-left"></span>
            </router-link>
            <router-link :to="`/ucenter/${loginStore.uid}`" class="item iconfont icon-play">
              <span class="item-name">投稿管理</span>
              <span class="iconfont icon-left"></span>
            </router-link>
            <div class="logout item iconfont icon-logout" @click="logout">退出登录</div>
          </div>
        </template>
        <div v-else class="opn-img" @click="userAvatar">
          <img style="width: 100%;height: 100%" src="@/assets/images/user.png" alt="图片异常"/>
        </div>
      </div>
      <div class="user-panel-item" @click="navJump('/Bid')">
        <svg class="right-entry-icon" fill="none" height="24" viewBox="0 0 20 20" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M10 1C5.02955 1 1 5.02955 1 10C1 14.9705 5.02955 19 10 19C14.9705 19 19 14.9705 19 10C19 5.02955 14.9705 1 10 1ZM10.0006 2.63614C14.0612 2.63614 17.3642 5.93996 17.3642 9.99977C17.3642 14.0604 14.0612 17.3634 10.0006 17.3634C5.93996 17.3634 2.63696 14.0604 2.63696 9.99977C2.63696 5.93996 5.93996 2.63614 10.0006 2.63614Z" fill="currentColor" fill-rule="evenodd"></path><path d="M13.1381 8.05573V8.05331H10.7706C10.7859 7.8643 10.7948 7.67286 10.7948 7.47981C10.7948 7.26414 10.7843 7.05008 10.7649 6.83926C10.7658 6.82552 10.7674 6.81179 10.7674 6.79725V6.79483C10.7674 6.35541 10.4111 6 9.97254 6C9.53312 6 9.17771 6.35622 9.17771 6.79483V6.79725C9.17771 6.85137 9.18336 6.90468 9.19386 6.95557L9.18255 6.95719C9.19871 7.12924 9.20759 7.30291 9.20759 7.479C9.20759 7.67286 9.19709 7.8643 9.17771 8.0525H6.74313V8.05573C6.32876 8.08239 6 8.42649 6 8.84814V8.85057C6 9.28998 6.33683 9.64216 6.77544 9.64216C6.80937 9.64216 6.8441 9.64378 6.89903 9.64297L8.7601 9.63893C8.28837 10.7294 7.47011 11.6341 6.44507 12.2149C6.44023 12.2173 6.43619 12.2197 6.43134 12.2229C6.42003 12.2294 6.40953 12.2359 6.39822 12.2423L6.39903 12.2431C6.17528 12.3837 6.02585 12.6325 6.02585 12.916V12.9184C6.02585 13.3578 6.38207 13.7132 6.82068 13.7132C6.99111 13.7132 7.14782 13.6591 7.27706 13.5687C8.7706 12.706 9.9168 11.3094 10.4556 9.64055H13.0105C13.0517 9.64136 13.1131 9.63893 13.1131 9.63893C13.5905 9.62924 13.9039 9.2916 13.9039 8.85299V8.85057C13.9047 8.42003 13.5638 8.07108 13.1381 8.05573Z" fill="currentColor"></path><path d="M13.7731 12.5388C13.7715 12.5356 13.7691 12.5331 13.7674 12.5307C13.74 12.4814 13.7077 12.4362 13.6713 12.3942C13.1584 11.6672 12.513 11.0412 11.7674 10.5541L11.7666 10.555C11.6366 10.4613 11.4766 10.4055 11.3046 10.4055C10.8652 10.4055 10.5098 10.7617 10.5098 11.2003V11.2028C10.5098 11.5033 10.677 11.765 10.9233 11.8999C11.5615 12.3215 12.0825 12.8045 12.4944 13.4499L12.5372 13.5041C12.6786 13.6333 12.866 13.7133 13.0728 13.7133C13.5122 13.7133 13.8676 13.3571 13.8676 12.9184V12.916C13.8668 12.7795 13.8329 12.6511 13.7731 12.5388Z" fill="currentColor"></path></svg>
        <div class="text">大会员</div>
      </div>
      <div class="user-panel-item" @click="navJump('/message')">
        <svg class="right-entry-icon" fill="none" height="24" viewBox="0 0 20 20" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z" fill="currentColor"></path><path d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z" fill="currentColor"></path></svg>
        <div class="text">消息</div>
      </div>
      <div class="user-panel-item" @click="navJump('/message')">
        <svg class="right-entry-icon" fill="none" height="24" viewBox="0 0 20 21" width="24" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M10 10.743C7.69883 10.743 5.83333 8.87747 5.83333 6.5763C5.83333 4.27512 7.69883 2.40964 10 2.40964V10.743Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.6"></path><path d="M10 10.743C10 13.0441 8.1345 14.9096 5.83333 14.9096C3.53217 14.9096 1.66667 13.0441 1.66667 10.743H10Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.6"></path><path d="M10 10.743C10 8.44182 11.8655 6.57632 14.1667 6.57632C16.4679 6.57632 18.3333 8.44182 18.3333 10.743H10Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.6"></path><path d="M9.99999 10.743C12.3012 10.743 14.1667 12.6085 14.1667 14.9096C14.1667 17.2108 12.3012 19.0763 9.99999 19.0763V10.743Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.6"></path></g><defs><clipPath id="clip0"><rect fill="currentColor" height="20" transform="matrix(-1 0 0 1 20 0.742981)" width="20"></rect></clipPath></defs></svg>
        <div class="text">动态</div>
      </div>
      <div class="user-panel-item" @click="navJump(`/user/${loginStore.uid}/collection`)">
        <svg width="24" height="24" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.0505 3.16759L12.7915 6.69573C12.954 7.02647 13.2702 7.25612 13.6349 7.30949L17.5294 7.87474C18.448 8.00817 18.8159 9.13785 18.1504 9.78639L15.3331 12.5334C15.0686 12.7905 14.9481 13.1609 15.0104 13.5256L15.6759 17.4031C15.8328 18.3184 14.8721 19.0171 14.0497 18.5845L10.5661 16.7537C10.2402 16.5823 9.85042 16.5823 9.52373 16.7537L6.04087 18.5845C5.21848 19.0171 4.2578 18.3184 4.41468 17.4031L5.07939 13.5256C5.14166 13.1609 5.02198 12.7905 4.75755 12.5334L1.9394 9.78639C1.27469 9.13785 1.64182 8.00817 2.56126 7.87474L6.4549 7.30949C6.82041 7.25612 7.13578 7.02647 7.29832 6.69573L9.04015 3.16759C9.45095 2.33468 10.6389 2.33468 11.0505 3.16759Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.603 11.8739C11.413 12.5556 10.7871 13.0554 10.0447 13.0554C9.29592 13.0554 8.66679 12.5467 8.48242 11.8569" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
        <div class="text">收藏</div>
      </div>
      <div class="user-panel-item" @click="navJump('/history')">
        <svg width="24" height="24" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.74286C5.02955 1.74286 1 5.7724 1 10.7429C1 15.7133 5.02955 19.7429 10 19.7429C14.9705 19.7429 19 15.7133 19 10.7429C19 5.7724 14.9705 1.74286 10 1.74286ZM10.0006 3.379C14.0612 3.379 17.3642 6.68282 17.3642 10.7426C17.3642 14.8033 14.0612 18.1063 10.0006 18.1063C5.93996 18.1063 2.63696 14.8033 2.63696 10.7426C2.63696 6.68282 5.93996 3.379 10.0006 3.379Z" fill="currentColor"></path><path d="M9.99985 6.6521V10.743" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path><path d="M12.4545 10.7427H10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg>
        <div class="text">历史</div>
      </div>
      <div class="user-panel-item" @click="navJump('/ucenter/home')">
        <svg width="24" height="24" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="16" height="20"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.74286H17.5V20.0762H2.5V1.74286Z" fill="currentColor"></path></mask><g mask="url(#mask0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 1.74286C9.92916 1.74286 9.85916 1.74369 9.78833 1.74536C5.85416 1.85453 2.58416 5.14869 2.50166 9.08286C2.44999 11.5404 3.58666 13.7304 5.36999 15.1337C5.52166 15.2529 5.63166 15.4162 5.67333 15.6045L6.30416 18.447C6.51583 19.3987 7.36083 20.0762 8.33583 20.0762H11.6617C12.6383 20.0762 13.4842 19.3987 13.6958 18.4445L14.3275 15.602C14.3692 15.4154 14.4775 15.2537 14.6275 15.1354C16.3733 13.7629 17.5 11.637 17.5 9.24286C17.5 5.10036 14.1425 1.74286 9.99999 1.74286ZM10.0003 3.40939C13.2161 3.40939 15.8336 6.02606 15.8336 9.24273C15.8336 11.0386 15.0186 12.7086 13.5978 13.8252C13.1428 14.1827 12.8244 14.6852 12.7011 15.2402L12.0686 18.0827C12.0269 18.2752 11.8586 18.4094 11.6619 18.4094H8.33609C8.14109 18.4094 7.97359 18.2761 7.93192 18.0852L7.30025 15.2427C7.17609 14.6869 6.85775 14.1827 6.40109 13.8236C4.94359 12.6769 4.12942 10.9619 4.16859 9.11773C4.23192 6.05523 6.77442 3.49606 9.83442 3.41189C9.88942 3.41023 9.94525 3.40939 10.0003 3.40939Z" fill="currentColor"></path><path d="M10 6.81299L8.81253 9.18726H11.1875L9.99952 11.561" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></g><path d="M6.66656 15.9095H13.3332" stroke="currentColor" stroke-width="1.7"></path></svg>
        <div class="text">创作中心</div>
      </div>
      <dev class="btn-upload"  @click="navJump('/ucenter/postVideo')">
        <el-button type="danger">
          <span class="iconfont icon-upload"></span>
          <span>投稿</span>
        </el-button>
      </dev>
    </div>
  </div>
</template>
<script setup>
import {useLoginStore} from "@/stores/loginStore.js"
import {getCurrentInstance, ref} from "vue";
import {bus} from "@/utils/mitt.js"
import Message from "@/utils/Message.js";
import auth_logout from "@/data/auth_logout.json"

const { proxy } = getCurrentInstance();
const loginStore = useLoginStore()
const props = defineProps({
  theme:{
    type: String,
    default:'light'
  }
})
const setop = ref()
const loginCopdown = ref(proxy.$loginCopdown);
const userAvatar = () => {
  bus.emit('login-copdown',0)
}
import Confirm from "@/utils/Confirm.js";
import VueCookies from "vue-cookies";
import message from "@/utils/Message.js";
const logout = () =>{
  Confirm({
    message:"确定退出登录吗？",
    okfun: async ()=>{
      const res = auth_logout;
      if(res.code === 200){
        loginStore.dellUserInfo();
        Message.success("退出登录成功")
        VueCookies.set('token',"")
      }
      if(!res){
        return;
      }
    }
  })
}
const navJump = (path) => {
  if(loginStore.token === ''||loginStore.token === null|| loginStore.token === undefined){
    message.warning("请先登录")
    bus.emit('login-copdown',0)
    return;
  }
  window.open(path, '_blank')
}
</script>
<style lang="scss" scoped>
  .header-barn{
    height: 64px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    .menu{
      display: flex;
      align-items: center;
      a{
        text-decoration: none;
      }
      .icon-logo{
        font-size: 16px;
        &::before{
          float:left;
          margin-top:-3px;
          font-size:25px;
          margin-right:5px;
        }
      }
    }
    .user-avatar{
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid #fff;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .user-avatar:hover{
      tansition: all 0.3s;
      transform: scale(1.1) translateY(10px);
      .active {
        transform: scale(2) translateY(10px) translateX(-10px);
      }
      .user-info-panel{
        visibility: revert;
        opacity: 1;
      }
    }
    .user-panel {
      display: flex;
      justify-content: flex-end;
      right: 0;
      align-items: center;
      .avatar_img{
        &:hover{
          width: 180px;
        }
      }
      .user-info-panel {
        padding: 10px 20px 10px;
        background: #ffffff;
        width: 145px;
        margin-left: -72px;
        position: absolute;
        top: 28px;
        visibility: hidden;
        border-radius: 5px;
        box-shadow: 0 0 12px rgba(0, 0, 0, .12);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s;
        .nick-name {
          font-size: 16px;
          text-align: center;
          line-height: 30px;
          color: #61666d;
        }
        .count-info {
          margin: 2px 0;
          display: flex;
          justify-content: space-around;
          .count-info-item {
            text-align: center;
            .count-info-item-title {
              font-size: 12px;
              margin-top: 5px;
              color: #61666d;
            }
            .count-info-item-num {
              font-size: 14px;
              text-align: center;
              color: #93999f;
            }
          }
        }
        .item {
          font-size: 14px;
          display: block;
          text-align: center;
          line-height: 30px;
          color: #61666d;
          padding: 0 20px;
          text-decoration: none;
          display: flex;
          justify-content: center;
          .item-name {
            flex: 1;
          }
          &::before {
            margin-right: 15px;
          }
          &:hover {
            background: #e8e8e8;
            border-radius: 5px;
          }
        }
        .logout {
          display: block;
          margin-top: 10px;
          border-top: 1px solid #dddddd;
          cursor: pointer;
        }
      }
      }
      .user-panel-item{
        margin-top: 15px;
        position: relative;
        text-align: center;
        overflow: hidden;
        width: 40px;
        height: 46px;
        padding: 0 5px;
        &:hover{
          cursor: pointer;
        }
        .active{
          transition: transform 0.3s;
          position: absolute;
          z-index: 900;
          left: 0;
          top: 0;
        }
        .text{
          font-size: 12px;
        }
        .iconfont{
          text-align: center;
          font-size: 24px;
          font-weight: normal;
        }
      }
    .search-body{
      color: #61666d;
      .search-panel {
        margin: 0 auto;
        position: relative;
        width: min(330px, 80%);
        .search-panel-inner{
          width: 100%;
          position: relative;
          top:10px;
          left: 0;
          border: 1px solid #e3e5e7;
          border-radius: 8px;
          overflow: hidden;
          z-index: 900;
          .input-panel {
            height: 40px;
            display: flex;
            align-items: center;
            background: #f1f2f3;
            input{
              width: 100%;
              height: 32px;
              border: none;
              background: #f1f2f3;
              border-radius: 5px;
              padding: 8xp 10px;
              margin: 3px 10px 3px 10px;
              &:focus{
                outline: none;
              }
            }
            .iconfont{
              font-size: 20px;
              margin-right: 10px;
              color: #2f3238;
              width: 35px;
              height: 35px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 5px;
              cursor: pointer;
              &:hover{
                background: #ddd;
              }
            }
          }
        }
      }
    }
    .btn-upload{
      margin-left: 10px;
      .el-button{
        background: #fb7299;
        border-radius: 8px;
        padding: 0 20px;
        .iconfont{
          &::before{
            margin-right: 5px;
          }
        }
      }
    }
  }
  .header-barn-light{
    color: #fff;
    .menu{
      color: #fff;
      a{
        color: #fff;
      }
    }
  }
  .header-barn-dark{
    color: #61666d;
    .menu{
      color: #61666d;
      a{
        color: #61666d;
      }
    }
  }
  /* 针对小屏幕（例如桌面显示器）的媒体查询（可选） */
  /* 修正媒体查询语法，并移除嵌套CSS规则，改为使用后代选择器 */
  @media (max-width: 1400px) {
    .text {
      display: none;
    }
  }
  .opn-img:hover {
    transform: scale(1.1); /* 放大1.1倍 */
    transition: transform 0.3s ease; /* 添加过渡效果 */
  }
  .opn-img {
    cursor: pointer; /* 鼠标指针变为手形 */
  }
  ::v-deep .el-input__wrapper {
    width: 100%;
    height: 32px;
    background: #f1f2f3;
    border-radius: 5px;
    padding: 8px 10px;
    margin: 3px 10px;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease;
    &:focus {
      background: rgb(227, 229, 231);
    }
  }
</style>